<template>
    <div>
        <div class="cameraBox">
            <video id="videoCamera" class="videoCamera" :width="videoWidth" :height="videoHeight"></video>
            <canvas id="canvasCamera" class="canvasCamera" :width="videoWidth" :height="videoHeight">
            </canvas>
            <div>
                <el-button @click="photograph">拍照</el-button>
                <!-- 默认状态 切换到当前组件摄像头打开 -->
                <el-button v-if="flag" @click="openCamera">打开摄像头</el-button>
                <el-button v-else @click="closeCamera">关闭摄像头</el-button>
                <el-button>重置</el-button>
                <el-button @click="goStuInfoEntry">提交</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            flag: false,
            videoWidth: 180,
            videoHeight: 180,
            thisVideo: null,
            thisContext: null,
            thisCanvas: null,
            imgSrc: "",
        };
    },
    mounted() {
        this.openCamera();
    },
    methods: {
        goStuInfoEntry() {
            this.$router.push({
                name: "studentinfo",
                query:{src:this.imgSrc}
            })
        },
        // 拍照
        photograph() {
            this.thisCanvas = document.querySelector(".canvasCamera");
            this.thisContext = this.thisCanvas.getContext("2d");

            this.thisContext.drawImage(
                this.thisVideo,
                0,
                0,
                this.videoWidth,
                this.videoHeight
            );

            this.imgSrc = this.thisCanvas.toDataURL("image/png");
        },
        // 打开本地摄像头
        openCamera() {
            this.flag = false;
            this.thisVideo = document.getElementById("videoCamera");
            // 打开本地摄像头 navigator.mediaDevices.getUserMedia
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 获取一下不同浏览器的getUserMedia
                    let getUserMedia =
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.getUserMedia;

                    if (!getUserMedia) {
                        return Promise.reject(new Error("请更换浏览器"));
                    }
                    return new Promise((resolve, reject) => {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                };
            }
            // constraints 传入音频视频文件信息
            const constraints = {
                audio: false,
                video: {
                    width: this.videoWidth,
                    height: this.videoHeight,
                },
            };

            // 调用摄像头
            navigator.mediaDevices
                .getUserMedia(constraints)
                .then((res) => {
                    console.log(res);
                    console.log(this.thisVideo);
                    if ("srcObject" in this.thisVideo) {
                        this.thisVideo.srcObject = res;
                    } else {
                        this.thisVideo.src = window.URL.createObjectURL(res);
                    }
                    this.thisVideo.onloadedmetadata = function () {
                        console.log("视频元数据加载完毕");

                        console.log(this);
                        this.play();
                    };
                })
                .catch((err) => {
                    console.log(err);
                    this.$message({
                        message: "没有开启摄像头或者浏览器不支持请求更换浏览器",
                        type: "warning",
                    });
                });
        },
        // 关闭摄像头
        closeCamera() {
            if (this.thisVideo && this.thisVideo !== null) {
                this.thisVideo.srcObject.getTracks()[0].stop();
                this.flag = true;
            }
        },
    },
};
</script>
  
<style lang="scss" scoped>

</style>